<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .game, .game * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
            text-align: center;
        }

        .game {
            width: 700px;
            margin: 50px auto 0;
            border: 1px solid #cccccc;
            border-radius: 10px;
            overflow: hidden;
        }

        .game .title {
            height: 50px;
            background-color: skyblue;
            line-height: 50px;
            font-size: 24px;
            color: white;
        }

        .game .title:hover {
            cursor: pointer;
            background-color: #3498db;
            font-size: 26px;
        }

        .game .body {
            height: 350px;
        }

        .hidden {
            display: none;
        }

        .game .people {
            height: 80px;
            padding: 20px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .game .people > div {
            height: 40px;
            width: 160px;
            line-height: 40px;
            border-radius: 10px;
            border: 1px solid #cccccc;
        }

        .game .people > div:hover {
            cursor: pointer;
        }

        .game .now {
            display: flex;
            height: 270px;
        }

        .game .txt {
            flex: 7;
            position: relative;
            padding: 30px;
        }

        .game .txt > span {
            line-height: 30px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .game .btn {
            flex: 3;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-content: center;
        }

        .game .btn > div {
            height: 20%;
            width: 80%;
            border: 1px solid #cccccc;
            vertical-align: middle;
            position: relative;
            border-radius: 10px;
        }

        .game .btn > div:hover {
            cursor: pointer;
        }

        .game .btn span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
<div class="game">
    <div class="title">开始游戏</div>
    <div class="body hidden">
        <div class="people">
            <div onclick="qiehuan(this)">刘备</div>
            <div onclick="qiehuan(this)">关羽</div>
            <div onclick="qiehuan(this)">张飞</div>
        </div>
        <div class="now">
            <div class="txt"><span>请选择对战玩家</span></div>
            <div class="btn">
                <div onclick="chuquan(this)"><span>剪刀</span></div>
                <div onclick="chuquan(this)"><span>石头</span></div>
                <div onclick="chuquan(this)"><span>布</span></div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    let nowP;

    function qiehuan(some) {
        nowP = $(some).text();
        $(".game .people>div").css({background: "white"});
        $(some).css({background: "#ccc"});
        $(".game .txt>span").text("你选择了" + nowP);
    }

    function chuquan(some) {
        if (nowP === undefined) {
            return;
        }
        let you = $(some).children("span").text();
        $(some).css({background: "#ccc"});
        window.setTimeout(function () {
            $(some).css({background: "white"});
        }, 100);
        let robot = getOption();
        $(".game .txt>span").text("你出" + you + "," + nowP + "出" + robot + "," + judge(you, robot));
    }

    function getOption() {
        let x = Math.ceil(Math.random() * 3);
        if (x === 1)
            return "剪刀";
        else if (x === 2)
            return "石头";
        else if (x === 3)
            return "布";
    }

    function judge(x, y) {
        if (x === y)
            return "平局";
        if ((x === "剪刀" && y === "石头") || (x === "石头" && y === "布") || (x === "布" && y === "剪刀")) {
            return "你输了";
        } else {
            return "你赢了";
        }
    }

    $(".game .title").click(function () {
        if ($(this).text() === "开始游戏")
            $(this).text("我不玩了");
        else if ($(this).text() === "我不玩了")
            $(this).text("开始游戏");
        $(".game .body").toggleClass("hidden");
    });
</script>
</html>